<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>JOYRICH</title>
	<script src="js/wen.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body class="index">
    <div id="loading"></div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
				<div class="page1 clearfix">
					<img src="images/page1_01.jpg" alt="" title="">
					<div class="p1_text1 animated bounceInLeft"></div>
					<div class="p1_text2 animated bounceInRight"></div>
					<div class="p1_log"></div>
				</div>
            </div>
            <div class="swiper-slide">
            	<div class="page2">
            		<div class="mian">
            			<div class="p2_log"></div>
            			<div class="con1">
            				<img src="images/p2_img1.jpg" alt="" title="" class="animated">
            				<p>JOYRICH</p>
            				<p>于2008年在美国洛杉矶创立</p>
            				<p>以自由、希望、梦想和爱为概念</p>
            				<p>融合数种文化精神本质</p>
            				<p>创造出独特的JOYRICH风格</p>
            				<p>并与多位知名艺术大师合作</p>
            				<p>为潮流人士提供兼具清新活力</p>
            				<p>与摩登感的时尚选择</p>
            			</div>
            			<div class="con2">
            				<img src="images/p2_img2.jpg" alt="" title="" class="animated">
            				<span></span>
            				<p>2015年</p>
            				<p>JOYRICH携手国际领先视光科研团队</p>
            				<p>沿袭其服装的创新理念</p>
            				<p>发布全新产品线——潮流眼镜</p>
            				<p>汲取东西方艺术元素</p>
            				<p>把眼镜作为配饰文化的主流</p>
            				<p>引领现代时尚美学</p>
            			</div>
            		</div>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div class="page3">
            		<div class="mian">
            			<h2 class="animated" id="h1">经典复古</h2>
            			<h2 class="animated" id="h2">不惧对比</h2>
            			<div class="p3_log"></div>
            			<div class="tit">
            				<p>JOYRICH潮牌眼镜春夏新款</p>
            				<p>无论是玳瑁纹理还是粗框板材、时尚印花， 总有一款唤醒你的潮流基因</p>
            			</div>
            			<div class="glasses" id="glasses"></div>	
            		</div>
            	</div>
            </div>
            <div class="swiper-slide">
                <div class="page">    
                	<div class="page4">
                		<div class="p3_bg1"></div>
                		<div class="p3_bg2"></div>
                		<div class="mian">
                            <!-- 头部logo -->
                			<div class="p4_log"></div>
                            <!-- 小熊开车 -->
                            <div class="bar_che">
                                <div class="che" id="che"></div>
                                <div class="gonglu"></div>
                            </div>
                            <dl class="tiaojian clearfix">
                                 <dt><div>参赛条件</div></dt>
                                 <dd>只要你是在校大学生，只要你追求潮流生活方式，只要你是最IN的时尚达人无论男女都可参加</dd>
                             </dl>
                             <dl class="fangshi clearfix">
                                 <dt><div>参赛奖励</div></dt>
                                 <dd>
                                     <p>上传你戴着光学镜（近视镜）的照片即可</p>
                                     <p>我们将在24小时内审核完毕</p>
                                     <p>
                                        <span>投票时间：</span>
                                        <span>3月28日—4月12日</span>
                                    </p>
                                     <p>
                                        <span>奖品领取：</span>
                                        <span>请真实填写你的联系方式，活动 结束后，将有工作人员与你联系</span>
                                    </p>
                                 </dd>
                             </dl>
                             <dl class="jizhi clearfix">
                                 <dt><div>参赛方式</div></dt>
                                 <dd>
                                     <p>
                                        <span>一等奖：</span>
                                        <span>男女各一名</span>
                                    </p>
                                     <p>
                                        <span>奖<var>品：</var></span>
                                        <span>3000元现金大奖+JOYRICH全国校园大使称号+免费到厦门拍摄写真+JOYRICH潮牌眼镜一副</span>
                                    </p>
                                     <p>
                                        <span>二等奖：</span>
                                        <span>总票数第二名</span>
                                    </p>
                                     <p>
                                        <span>奖<var>品：</var></span>
                                        <span>1000元现金大奖+JOYRICH潮牌眼镜一副</span>
                                    </p>
                                     <p>
                                        <span>三等奖：</span>
                                        <span>总票数第三名</span>
                                    </p>
                                     <p>
                                        <span>奖<var>品：</var></span>
                                        <span>500元现金大奖+JOYRICH潮牌眼镜一副</span>
                                    </p>
                                 </dd>
                             </dl> 
                		</div>
                	</div>
                </div>
            </div>
         </div>
    </div>
    <script src="js/swiper.min.js"></script>
     <script src="js/jquery-1.11.3.min.js"></script>
     <script>
        var loading = document.getElementById('loading');
        var loadArr = [
            "page1_01.jpg",
            "p1_text1.png",
            "p1_text2.png",
            "p2_log.png",
            "p3_bg.jpg",
            "p3_log.png",
            "p3_glasses.gif",
            "p4_bg1.png",
            "p4_bg2.png",
            "p1_log.png",
            "p4_che.png",
            "p4_gonglu.png",
            "p4_cansai.png",
        ]
        inloading(loadArr, loading);

         var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            direction: 'vertical', 
            slidesPerView: 'auto',
            onSlideChangeEnd: function(swiper){
                switch (swiper.activeIndex) {
                    case 0:
                        $(".page1 .p1_text1").addClass('bounceInLeft show1');
                        $(".page1 .p1_text2").addClass('bounceInRight show1');
                        $(".page2 p").removeClass('show');
                        $(".page2 img").removeClass('flipInX show');
                        break;
                    case 1:
                        $(".page1 .p1_text1").removeClass('bounceInLeft show1');
                        $(".page1 .p1_text2").removeClass('bounceInRight show1');
                        $(".page2 p").addClass('show');
                        $(".page2 img").addClass('flipInX show');
                        $(".page3 h2").eq(0).removeClass('bounceInLeft show1');
                        $(".page3 h2").eq(1).removeClass('bounceInRight show1');
                        break;
                    case 2:
                        $(".page2 p").removeClass('show');
                        $(".page2 img").removeClass('flipInX show');
                        $(".page3 h2").eq(0).addClass('bounceInLeft show1');
                        $(".page3 h2").eq(1).addClass('bounceInRight show1');
                        break;
                    case 3:
                        $(".page3 h2").eq(0).removeClass('bounceInLeft show1');
                        $(".page3 h2").eq(1).removeClass('bounceInRight show1');
                        break;
                }   
            }, 
            onTouchEnd: function() {
               if(swiper.activeIndex == 3) {
                    if( swiper.touches.diff < -150){
                        window.location = "toupiao.html";
                    }
                }
            },
        });
     </script>
</body>
</html>